<template>
  <el-dialog
      v-model="centerDialogVisible"
      :title="formTitle"
      width="20%"
      destroy-on-close
      center
      @close="dialogClose">
      <el-tree
              style="max-width: 600px"
              :data="deviceList"
              node-key="labelId"
              :check-strictly="true"
              :props="defaultProps"
              :default-expand-all="true"
              :expand-on-click-node="false"
      >
        <template #default="{ node, data }">
        <span class="custom-tree-node">
          <div>
             <el-checkbox v-if="data.isLeaf" v-model="checkDeviceIdList" :label="data.id" :value="data.id" @change="checkDevice(data)">{{ node.label }}</el-checkbox>
            <span v-if="!data.isLeaf"> {{ node.label }}</span>
          </div>
        </span>
        </template>
      </el-tree>
      <div class="bottomButton" style="width: 100%">
        <el-button class="affirm" @click="centerDialogVisible = false" style="width: 47.5%;height: 100%;">取消</el-button>
        <el-button class="affirm" @click="resetForm" style="width: 47.5%;height: 100%;">确认</el-button>
      </div>
  </el-dialog>

</template>

<script>
import _ from "underscore";
let me;
export default {
  name: "BindProjectDeviceDialog",
  data() {
    return {
      formTitle: '',
      defaultProps:{
        children: 'children',
        label: 'label',
        disabled: 'disabled',
      },
      deviceList:[],
      deviceInfoObj:{},
      checkDeviceIdList:[],
      centerDialogVisible: false,
      successMessage:"添加成功"
    }
  },
  methods: {
    async selTreeList() {
      let response = await me.$asyncPost("project",{
        actionType:"projectDeviceTree",
        projectId:me.projectId,
        deviceType:me.deviceType
      });
      if(response.success){
        me.deviceList = response.treeList;
        me.deviceInfoObj = response.deviceInfoObj;
        me.checkDeviceIdList = response.checkDeviceIdList;
      }
    },
    checkDevice(data){
      let checked = me.checkDeviceIdList[me.checkDeviceIdList.length - 1] === data.id
      if(checked){
          if(data.parentId === 0){
            me.checkDeviceIdList = _.union(me.checkDeviceIdList,me.deviceInfoObj[data.id]);
          }else{
            let parentIntersection = _.intersection(me.checkDeviceIdList,me.deviceInfoObj[data.parentId]);
            if(parentIntersection.length === me.deviceInfoObj[data.parentId].length){
              me.checkDeviceIdList.push(data.parentId);
            }
          }
      }else{
        if(data.parentId === 0){
          me.checkDeviceIdList = _.difference(me.checkDeviceIdList,me.deviceInfoObj[data.id]);
        }else{
          let parentIntersection = _.intersection(me.checkDeviceIdList,me.deviceInfoObj[data.parentId]);
          if(parentIntersection.length === me.deviceInfoObj[data.parentId].length - 1){
            me.checkDeviceIdList = _.without(me.checkDeviceIdList,data.parentId);
          }

        }
      }
    },
    showDialog(row) {
      me = this;
      me.formTitle = '绑定项目设备';
      me.actionType = "bindProjectDevice";
      me.centerDialogVisible = true;
      me.projectId = row.projectId;
      me.deviceType = row.deviceType;
      me.selTreeList();
    },
    async resetForm() {
      console.log(me.checkDeviceIdList);
      let response = await me.$asyncPost("project", {
        actionType: "projectDeviceBinding",
        projectId: me.projectId,
        deviceIdList:me.checkDeviceIdList,
        deviceType: me.deviceType
      });
      if (response.success) {
        me.$message.success('绑定成功');
        me.centerDialogVisible = false;
      }
    },
    dialogClose() {
      me.deviceList=[];
      me.deviceInfoObj={};
      me.checkDeviceIdList=[];
      me.centerDialogVisible = false;
    }
  }
}
</script>

<style scoped lang="scss">

</style>